<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>天天生鲜-用户中心</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <style>
        /* 添加自定义样式 */
        .custom-select {
            background-color: #f2f2f2;
            border: none;
            padding: 6px 10px;
            border-radius: 4px;
            font-size: 14px;
            width: 500px;
        }

        .custom-select:focus {
            outline: none;
            box-shadow: 0 0 5px #999999;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="header_con">
        <div class="header">
            <div class="welcome fl">欢迎来到天天生鲜!</div>
            <div class="fr">
                <div class="user_link fl">
                    <span>|</span>
                    <a href="user_center_info.html">用户中心</a>
                    <span>|</span>
                    <a href="cart.html">我的购物车</a>
                    <span>|</span>
                    <a href="user_center_order.html">我的订单</a>
                </div>
            </div>
        </div>
    </div>

    <div class="search_bar clearfix">
        <a href="index.html" class="logo fl"><img src="images/logo.png"></a>
        <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>

    </div>

    <div class="main_con clearfix">
        <div class="left_menu_con clearfix">
            <h3>用户中心</h3>
            <ul>
                <li><a href="user_center_info.html">· 个人信息</a></li>
                <li><a href="user_center_order.html">· 全部订单</a></li>
                <li><a href="user_center_site.html" class="active">· 收货地址</a></li>
            </ul>
        </div>
        <div class="right_content clearfix">
            <h3 class="common_title2">收货地址</h3>
            <div class="site_con">
                <dd>
                    <select class="custom-select" v-model="selectedAddress">
                        <option value="" disabled selected>----------------------------收货地址--------------------------
                        </option>
                        <option v-for="add in address" :value="add">
                            {{ add.province }} {{ add.city }} {{ add.area }} {{ add.addr }}
                            ({{ add.name }}收) {{ maskPhoneNumber(add.tel) }}
                        </option>
                    </select>
                </dd>
            </div>
            <h3 class="common_title2">编辑地址</h3>
            <div class="site_con">
                <form>
                    <div class="form_group">
                        <label>收件人：</label>
                        <input type="text" name="" v-model="name">
                    </div>
                    <div class="form_group">
                        <label>省：</label>
                        <input type="text" name="" v-model="province">
                    </div>
                    <div class="form_group">
                        <label>市：</label>
                        <input type="text" name="" v-model="city">
                    </div>
                    <div class="form_group">
                        <label>区：</label>
                        <input type="text" name="" v-model="area">
                    </div>
                    <div class="form_group">
                        <label>详细地址：</label>
                        <input type="text" name="" v-model="addr">
                    </div>
                    <div class="form_group">
                        <label>手机：</label>
                        <input type="text" name="" v-model="tel">
                    </div>
                    <input type="button" name="" value="确认添加" class="info_submit" @click="add_Addr()">
                </form>
            </div>
        </div>
    </div>


    <div class="footer">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>
        </div>
        <p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
        <p>电话：010-****888 京ICP备*******8号</p>
    </div>
</div>
</body>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/slide.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/qs.js"></script>
<script>
    axios.defaults.headers.post['Content-Type'] = 'application/json';
    let begin = "http://localhost:20001/";
    let security = "freshgood-security/";
    let goods = "freshgood-goods/";
    let cart = "freshgood-cart/";
    Vue.prototype.axios = axios;
    axios.interceptors.request.use(config => {
            const token = localStorage.getItem('token');
            if (token) {
                config.headers.Authorization = token;
            } else {
                config.headers.Authorization = '';
            }
            console.log(token);
            console.log(config);
            return config;
        }, error => {
            return Promise.reject(error);
        }
    );
    var vm = new Vue({
        el: '#app',
        data: {
            user: {},
            mno: '',
            name: '',
            tel: '',
            province: '',
            city: '',
            area: '',
            addr: '',
            address: [],
            selectedAddress: "",
        },
        methods: {
            add_Addr: function () {
                if (this.mno.length === 0) {
                    alert("请先登录！");
                    location.href = "login.html";
                    return;
                }
                if ((this.name.length === 0 || this.addr.length === 0
                    || this.province.length === 0 || this.tel.length === 0
                    || this.area.length === 0 || this.city.length === 0)
                ) {
                    alert("请填写完整的信息");
                    return;
                }
                axios({
                    url: begin + security + "addr/add_address",
                    method: "get",
                    params: {
                        mno: this.mno,
                        name: this.name,
                        tel: this.tel,
                        province: this.province,
                        city: this.city,
                        area: this.area,
                        addr: this.addr,
                    }
                }).then(data => {
                    if (data.data === 1) {
                        alert("添加成功！");
                        this.name = '';
                        this.tel = '';
                        this.province = '';
                        this.city = '';
                        this.area = '';
                        this.addr = '';
                    } else {
                        alert("添加失败！");
                    }
                })
            },
            maskPhoneNumber(phoneNumber) {
                // 隐藏电话号码中间六位数字
                return phoneNumber.replace(/(\d{3})\d{6}(\d{2})/, '$1******$2');
            }
        },
        mounted: function () {
            axios.get(begin + security + "addr/findBymno").then(rs => {
                    this.address = rs.data;
                }
            )
        },
        created() {
            const user = localStorage.getItem('user');
            if (user) {
                this.user = JSON.parse(user);
                this.mno = this.user.mno;
                // console.log("user:"+JSON.stringify(this.user));//user对象值
                // console.log(this.user.nickName);
            }
            // //接受参数 cartgoods
            // var data = JSON.parse(sessionStorage.getItem("addrinfo"));
            // this.ano=data.ano;
        },
    })

</script>

</html>